<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        label="日期"
        width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="姓名"
        width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">


<!--          自定义下拉框分页组件-->
          <PageSelector
            v-model="scope.row.acsProductId"
            :allOptions="PageSelectorAllOptions"
            :total="PageSelectorTotal"
            @loadData="PageSelectorLoadData"
          />


        </template>
      </el-table-column>
    </el-table>


  </div>
</template>

<script>

//引用组件
import PageSelector from '@/components/下拉框/下拉搜索分页组件.vue'


export default {
  components:{
    PageSelector
  },
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: 'A',
        acsProductId:['value-1-1','value-1-2', 'value-1-3'],
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: 'B',
        acsProductId:['value-1-3'],
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: 'C',
        acsProductId:['value-1-2', 'value-1-3'],
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: 'D',
        acsProductId:['value-1-1', 'value-1-3'],
        address: '上海市普陀区金沙江路 1516 弄'
      }],

      //定义 下拉框分页组件使用的变量
      //下拉框选项
      PageSelectorAllOptions:[],
      //下拉框总条数
      PageSelectorTotal:0,
    };
  },
  create(){
  },

  computed:{
  },

  methods: {

    /**
     * 下拉框加载选项数据使用
     * @param params
     * @constructor
     */
    PageSelectorLoadData(params){
      let 模拟接口数据 = this.模拟调用接口返回数据(params)
      this.PageSelectorAllOptions = 模拟接口数据.data
      this.PageSelectorTotal = 模拟接口数据.total;    // 更新总数
    },
    模拟调用接口返回数据(params){
      //这里调用服务端接口, 将分页参数 以及搜索条件传过去
      let arr = []
      //模拟数据
      for (let i = 1; i <= params.pageSize; i++) {
        arr.push({value:"value-"+params.currentPage+'-'+i, label:"名称-"+params.currentPage + '-'+i})
      }
      let 模拟接口数据 = {total:100, data:arr};
      return 模拟接口数据;
    },
  }
};
</script>


<style>
/* 覆盖 Element UI 的默认样式 */
.select-popover-class .el-select-dropdown__wrap {
  max-width: 98% !important;
  max-height: 100% !important; /* 使用 !important 确保优先级 */
  overflow-y: auto;
  margin-right: 0px;
}

.select-popover-class .el-select-dropdown__list {
  padding: 6px 10px !important;
}

.select-popover-class .scroll-wrapper {
  max-width: 100% !important;
  position: relative;
  max-height: 100% !important; /* 根据需要调整高度 */
  overflow: hidden; /* 隐藏滚动条 */
}


/* 控制全选按钮样式 */
.select-popover-class .el-scrollbar__view > .el-checkbox{
  padding: 5px 20px;
}

/* 取消多选框触发事件 */
.select-popover-class .el-scrollbar__view > li .el-checkbox {
  pointer-events: none;
}

/* 隐藏多选框选中勾选样式 √ */
.select-popover-class .el-scrollbar__view > li::after {
  display: none;
}
</style>

<style scoped>

/* 搜索框的样式 */
.el-input {
  width: 100%;
  margin-bottom: 10px;
}

/* 可滚动的选项区域 */
.options-container {
  width: 100%;
  max-height: 900px !important; /* 设置一个合适的高度来滚动 */
  overflow-y: auto;
}

/* 分页部分固定在底部 */
.pagination-container {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  border-top: 1px solid #ebeef5;
  background-color: #fff;
  text-align: center;
}
</style>

